<template>
	<el-card style="margin-bottom:20px;">
		<div slot="header" class="clearfix">
			<span>About me</span>
		</div>

		<div class="user-profile">
			<div class="box-center">
				<el-upload
					class="upload"
					:show-file-list="false"
					name="avatar"
					action=""
					accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
					list-type="picture"
					:http-request="uploadAvatar"
					:on-success="uploadSuccess"
					:on-error="uploadError"
				>
					<div class="avatar">
						<img class="image" :src="user.avatar" alt="编辑头像" />
						<span class="text">更换头像</span>
					</div>
				</el-upload>
			</div>
			<div class="box-center">
				<div class="user-name text-center">
					{{ user.nickname || user.username }}
				</div>
				<div class="user-info text-center text-muted">
					<svg-icon icon-class="phone" />
					<span>{{ user.phone }}</span>
				</div>
				<div class="user-info text-center text-muted">
					<svg-icon icon-class="email" />
					<span>{{ user.email }}</span>
				</div>
				<div class="user-info user-account text-center text-muted">
					<svg-icon icon-class="setting" />
					<span>账户设置</span>
				</div>
			</div>
		</div>

		<div class="user-bio">
			<div class="user-bio-section">
				<div class="user-bio-section-header">
					<svg-icon icon-class="role" />
					<span>Role</span>
				</div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ user.roles.join(',') }}
					</div>
				</div>
			</div>
		</div>
	</el-card>
</template>

<script>
	import { accountService } from '@/services/security/Account';

	export default {
		name: 'UserCard',
		props: {
			user: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				upload: {
					headers: {
						Authorization: this.$store.getters.token
					},
					url: '/api/account/avatar'
				}
			};
		},
		methods: {
			uploadAvatar(param) {
				console.log(param);
				accountService
					.upgradeAvatar(param.file)
					.then(() => {
						param.onSuccess();
					})
					.catch(() => {
						param.onError();
					});
			},
			uploadSuccess() {
				this.$message.success('头像更新成功');
			},
			uploadError() {
				this.$message.error('头像更新失败！');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box-center {
		margin: 0 auto;
		display: table;
	}

	.text-muted {
		color: #777777;
	}

	.user-profile {
		.user-name {
			font-weight: bold;
		}

		.box-center {
			padding-top: 10px;

			.upload {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				margin: 0 auto;

				.avatar {
					position: relative;
					width: 100px;
					height: 100px;
					vertical-align: middle;
					horiz-align: center;

					&:hover .text {
						opacity: 0.6;
					}

					.image {
						width: 100px;
						height: 100px;
						border-radius: 50%;
						vertical-align: middle;
						horiz-align: center;
					}

					.text {
						color: #409eff;
						background-color: #ffffff;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						width: 100px;
						height: 100px;
						line-height: 100px;
						text-align: center;
						letter-spacing: 5px;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						opacity: 0;
						-webkit-transition: all 0.35s ease-in-out;
						-moz-transition: all 0.35s ease-in-out;
						transition: all 0.35s ease-in-out;
					}
				}
			}
		}

		.user-info {
			padding-top: 10px;
			font-weight: 400;
			font-size: 14px;

			.svg-icon {
				margin-right: 4px;
			}
		}

		.user-account {
			color: #409eff;

			&:hover {
				cursor: pointer;
			}
		}

		.box-social {
			padding-top: 30px;

			.el-table {
				border-top: 1px solid #dfe6ec;
			}
		}

		.user-follow {
			padding-top: 20px;
		}
	}

	.user-bio {
		margin-top: 20px;
		color: #606266;

		span {
			padding-left: 4px;
		}

		.user-bio-section {
			font-size: 14px;
			padding: 15px 0;

			.user-bio-section-header {
				border-bottom: 1px solid #dfe6ec;
				padding-bottom: 10px;
				margin-bottom: 10px;
				font-weight: bold;
			}
		}
	}
</style>
